<template>
    <div>
        
        <!-- 图片详情页头部 -->
        <div class="images-top">
            <h1>{{ imageinfo.title }}</h1>
            <div class="subtitle">
                <span>发表时间：{{ imageinfo.add_time | dataFormat }}</span>
                <span>评论数：{{ imageinfo.click }} 个</span>
            </div>
        </div>
        <!-- 图片缩略图 -->
        <div class="box">
            <div :class="[flag?'thumbs':'thumbs1']">
            <vue-preview :slides="slide1" @close="handleClose">
                
            </vue-preview>
                
            </div>
        </div>
        <!-- 图片详情页内容 -->
            <div class="images-content" v-html="imageinfo.content"></div>
        <!-- 图片详情页评论 -->
        <my-comment :id="id"></my-comment>
    </div>
</template>
<script>
// 引入评论插件
import myComment from "../subComponents/Comment.vue"
import { Toast } from "mint-ui"
export default {
    data(){
        return {
            id: this.$route.params.id,
            imageinfo: [],
            slide1: [],
            flag : true

        }
    },
    created(){
        this.getimageinfo(),
        this.getthumImages()
    },
    methods:{
        //获取图片的信息
        getimageinfo(){
            this.$http.get("api/getimageinfo/"+this.id).then( result =>{
                if( result.body.status === 0 ){
                    this.imageinfo = result.body.message[0]
                }else {
                    Toast("加载失败")
                }
            })
        },
        //获取缩略图信息
        getthumImages(){
            // 图片为空，用其他的图片代替
            // this.$http.get("api/getthumimages/"+this.id).then( result =>{
            //     if(result.body.status === 0){
            //         this.slide1 = result.body.message
            //         console.log(this.slide1)
            //     }else {
            //         Toast("加载失败")
            //     }
            // })

            // 获取轮播图的数据信息 通过vue-resource this.$http.get()
            this.$http.get("api/getlunbo").then( result =>{
                // console.dir(result.body.message )
                if( result.body.status === 0 ){
                    // console.dir(result.body)
                    result.body.message.forEach(item =>{
                        item.msrc = item.img
                        item.src = item.img
                         item.alt = 'picture1'
                        item.title = ""
                        item.w = 600
                        item.h = 400
                    })
                    this.slide1 = result.body.message
                   console.dir(this.slide1)
                } else {
                   Toast('加载失败');
                }
            })
        },
        handleClose () {
           
        }
    },
    components:{
        myComment
    }
}
</script>
<style lang="scss" scoped>
    .images-top {
        h1 {
            font-size: 18px;
            color: #22ccff;
            text-align: center;
            padding: 5px 0px;
        }
        .subtitle {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            padding: 0px 10px 5px;
            border-bottom: 1px solid #ccc;
        }
    }
    .images-content {
        font-size: 14px;
        line-height: 25px;
        padding: 10px;
        text-indent: 2em;
        font-family:"micorsoft yahei";
    }

</style>


